<template>
  <div class="dashboard-container">
    <div class="app-container" style="padding:10px">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-row>
          <el-col :span="16">
            <el-form :inline="true" class="demo-form-inline" :model="page">
              <el-form-item label="关键字">
                <el-input size="small" v-model="page.keyword"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="page.state" placeholder="请选择" size="small">
                  <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="small" @click="headerEmpty">清空</el-button>
                <el-button type="primary" size="small" @click="headerSearch">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="8">
            <el-button type="success" style="float: right;" size="small" icon="el-icon-edit" @click="xiugai(1)">新增技巧</el-button>
          </el-col>
        </el-row>
        <!-- 数据记录 -->
        <el-row>
          <el-col :span="24">
            <div class="page-tools">
              <div class="tips">
                <i class="el-icon-info" />
                <span class="ziti">数据一共{{ total }}条</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 数据列表 -->
        <el-table :data="list" style="width: 100%" fit>
          <el-table-column label="序号" type="index" width="80">
          </el-table-column>
          <el-table-column label="文章标题" width="400">
            <template v-slot="{row}">
              <span>{{ row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="阅读数" prop="visits">
          </el-table-column>
          <el-table-column label="录入人" prop="username">
          </el-table-column>
          <el-table-column label="录入时间" prop="createTime">
          </el-table-column>
          <el-table-column label="状态" prop="state" width="100">
            <template v-slot="{ row }">
              {{ EntryStatus(row.state) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template v-slot="{ row }">
              <el-button type="text" size="medium" @click="preview(row)">预览</el-button>
              <el-button type="text" size="medium" @click="Enable(row)">
                <span>{{row.state ===0 ? '启用' : '禁用'}}</span>
              </el-button>
              <el-button type="text" size="medium" ref="xiugaiRef" v-if="row.state ===0" @click="xiugai(2,row)">修改</el-button>
              <el-button type="text" size="medium" ref="xiugaiRef" v-else disabled>修改</el-button>
              <el-button @click=" remButton(row)" type="text" size="medium" ref="shanchuRef" v-if="row.state ===0">删除</el-button>
              <el-button @click=" remButton(row)" type="text" size="medium" ref="shanchuRef" v-else disabled>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <!-- 分页组件 -->
          <el-pagination layout="prev, pager, next, sizes, jumper" :page-sizes="[5, 10, 20, 50]" background :current-page="page.page" :page-size="page.pagesize" :total="total" @current-change="changePage" @size-change="handleSizeChange" />
        </el-row>
      </el-card>
    </div>
    <!-- 新增弹层组件 -->
    <ArticlesAdd ref="aa" :showDialog="newBombLayer" @control="newBombLayer=$event" @Refresh="getList()" />
    <!-- 预览框弹层 -->
    <Preview :showDialog="newpreview" @closeVW="newpreview=$event" :shuju="shuju" />
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/articles.js'
import { parseTime } from '@/utils/index.js'
import { newStatus, status } from '@/api/hmmm/constants'
import ArticlesAdd from '@/module-hmmm/components/articles-add.vue'
import Preview from '@/module-hmmm/components/articles-preview.vue'
export default {
  components: {
    ArticlesAdd, Preview
  },
  data () {
    return {
      // 当前行预览数据
      shuju: {},
      // 控制预览弹层组件的布尔值
      newpreview: null,
      // 控制新增弹层组件的布尔值
      newBombLayer: null,
      // 状态
      status,
      // 页码
      page: {
        page: 1, // 页码
        pagesize: 10, // 每页条数
        keyword: '', // 关键字
        state: null // 下拉框数据
      },
      total: 0, // 总共多少数据
      // 文章列表数据
      list: [],
      // 时间更改
      time: null
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 获取文章列表
    async getList () {
      const { data } = await list(this.page)
      this.list = data.items
      this.total = data.counts
      this.list.forEach(item => {
        item.createTime = parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}:{s}')
      })
    },
    // 处理文章列表中录入状态的函数
    EntryStatus (val) {
      const map = {}
      newStatus.forEach(item => {
        map[item.value] = item.label
      })
      return map[val]
    },
    // 控制翻页组件的函数
    changePage (page) {
      this.page.page = page
      this.getList()
    },
    // 控制每页显示多少数据
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getList()
    },
    // 头部搜索函数
    headerSearch () {
      this.getList()
    },
    // 头部清空函数
    headerEmpty () {
      this.page.keyword = ''
      this.page.state = null
    },
    // 删除函数
    remButton (val) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (this.list.length === 1 && this.page.page > 1) {
          this.page.page--
        }
        await remove(val)
        this.getList()
        this.$message.success('操作成功')
      }).catch((error) => {
        console.log(error)
      })
    },
    // 启用按钮的函数
    async Enable (row) {
      if (row.state === 0) {
        // 开启
        row.state = 1
        await changeState(row)
      } else {
        // 禁用
        row.state = 0
        await changeState(row)
      }
      this.$message.success('操作成功')
    },
    // 修改，新增按钮函数
    xiugai (type, id) {
      this.type = type
      this.hangID = id
      if (type === 2) {
        this.$refs.aa.hangData(id)
      }
      this.newBombLayer = true
    },
    // 控制预览框的函数
    preview (val) {
      this.newpreview = true
      this.shuju = val
      console.log(val)
    }
  }
}
</script>

<style lang="scss" scoped>
.page-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  .tips {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding: 8px 16px;
    border-radius: 4px;
    background: #f4f4f5;
    i {
      margin-right: 10px;
      color: #909399;
    }
    .ziti {
      font-size: 13px;
      color: #909399;
    }
  }
}
</style>
